<script setup lang="ts">
import { ref } from 'vue'
import {ChatDotRound, Edit} from "@element-plus/icons-vue";
const images = ref([
  ' https://wx2.sinaimg.cn/orj360/70c0bd0ely1i3jclndrqhj21bg1z4npd.jpg'
]);



</script>

<template>
  <div id="body">
    <el-card class="weibo-card">


      <!-- 用户信息区 -->
      <div class="user-info">
        <el-avatar :size="40" src="https://example.com/avatar.jpg" />
        <div class="user-detail">
          <span class="username">嗑颜bot</span>
          <div class="meta-info">
            <span class="post-time">7-15 17:39</span>
            <el-tag size="small" class="user-tag">娱乐博主</el-tag>
          </div>
        </div>
      </div>

      <!-- 微博内容 -->
      <div class="weibo-content">
        <p>脸是核心出装，太无敌了冰冰</p>
        <div class="weibo-images">
          <el-image
              v-for="(img, index) in images"
              :key="index"
              :src="img"
              fit="cover"
              class="content-image"
              style="width: 160px; height: 220px;"
          />
        </div>
      </div>

      <!-- 互动工具栏 -->
      <div class="action-bar">
        <el-button type="text" class="action-btn">
          <Edit style="width: 1.5em; height: 1.5em; margin-right: 2px" />
          <span class="el-text">30</span>
        </el-button >
        <el-button type="text" class="action-btn">
          <el-icon :size="20"><ChatDotRound /></el-icon>
          <span class="el-text">30</span>
        </el-button>
        <el-button type="text" class="action-btn">
          <el-icon :size="20"><Star /></el-icon>
          <span class="el-text">30</span>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.el-text {
  font-size: 12px;
}
</style>